<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="description" content="jQuery图像照片剪裁插件Jcrop" />
<meta name="description" content="张鑫旭web前端学习之jQuery" />
<meta name="keywords" content="张鑫旭,鑫空间-鑫生活,博客,web前端,css,JavaScript,jQuery,插件,demo页面,学习" />
<meta name="author" content="张鑫旭,zhangxixnu" />
<title>jQuery图像照片剪裁插件Jcrop</title>
<link rel="shortcut icon" href="http://www.zhangxinxu.com/zxx_ico.png" />
<link rel="stylesheet" href="../css/common.css" type="text/css" />
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
<script type="text/javascript" src="../js/jquery-1.3.2-min.js"></script>
<script type="text/javascript" src="../js/jquery.Jcrop.js"></script>
<style type="text/css">
.img_pos{padding:0 0 20px 12%;}
.animate_btns{padding-top:20px;}
</style>
<script type="text/javascript">
	$(document).ready(function(){
		//初始化一个剪裁大小，左上角坐标(100,100)，右下角为(200,200)
		var api = $.Jcrop("#xuwanting",{
			setSelect: [100,100,200,200] //setSelect是Jcrop插件内部已定义的运动方法
		});
		var i, ac;
		//处理程序阻止事件的进行
		function nothing(e){
			e.stopPropagation();
			e.preventDefault();
			return false;
		};
		//返回动画回调的事件处理程序
		function anim_handler(ac){
			return function(e){
				api.animateTo(ac);
				return nothing(e);
			};
		};
		//设置一些动画的坐标
		var ac = {
			animate1:[50,50,450,320],
			animate2:[74,81,218,228],
			animate3:[8,8,32,360],
			animate4:[316,150,470,230],
			animate5:[80,160,500,190]
		};
		//附加相应的事件处理程序
		for(var i in ac){
			$("#"+i).click(anim_handler(ac[i]));	
		}
		//单击“重新设置”按钮后
		$("#reset").click(function(e){
			api.setSelect([200,125,300,225]);
			return nothing(e);						   
		});
	});
</script>
</head>

<body>

<img id="xuwanting" src="http://localhost:8080/bfadmin/image/gym/20170706173151674.jpg" />
                    <div class="animate_btns">
                    	<input type="button" value="动画1" id="animate1" />
                        <input type="button" value="动画2" id="animate2" />
                        <input type="button" value="动画3" id="animate3" />
                        <input type="button" value="动画4" id="animate4" />
                        <input type="button" value="动画5" id="animate5" />
                        <input type="button" value="重新设置" id="reset" />
                    </div>
</body>
</html>
